<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CDK管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/ast/layui/css/layui.css" media="all">
</head>
<style>
    .badge-container {
        display: grid;
        grid-template-columns: repeat(3, 150px);
        gap: 20px;
    }
    .badge {
        background: linear-gradient(145deg, #4e4e4e, #7a7a7a);
        color: white;
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
        position: relative;
        overflow: hidden;
        transition: transform 0.3s;
    }
    .badge::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, #333, transparent);
        z-index: 1;
        transform: skew(-20deg);
    }
    .badge:hover {
        transform: translateY(-5px);
    }
    .badge-title {
        font-size: 16px;
        white-space: normal;
        margin-bottom: 5px;
        color: #ffd700;
        font-weight: bold;
    }
    .badge-info {
        font-size: 12px;
    }
    .badge-container h3 {
        justify-content: center;
        align-items: center;
    }
</style>
<body>

<div class="layui-row">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                CDK列表
            </div>
            <div class="layui-card-body">
                <table id="cdktable" lay-filter="cdktable"></table>
            </div>
        </div>
    </div>
</div>
<div class="layui-row">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                CDK操作
            </div>
            <div class="layui-card-body">
                <form class="layui-form" action="" lay-filter="medalForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">CDK</label>
                        <div class="layui-input-block">
                            <input type="text" name="cdkid" required lay-verify="required" placeholder="请输入CDK" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-danger" lay-submit lay-filter="removecdk">删除CDK</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div>
</main>
<script src="/ast/layui/layui.js"></script>
<script>
    layui.use(['table', 'form'], function(){
        var table = layui.table;
        var form = layui.form;
        table.render({
            elem: '#cdktable',
            url: 'cdk/select/index.php', 
            lineStyle: 'height: 120px;',
            cols: [[
                {field: 'cdk', title: 'CDK', width: 170, sort: true},
                {field: 'used', title: '已使用次数', width: 165,edit: 'text'},
                {field: 'canuse', title: '可使用次数', width: 165,edit: 'text'},
                {field: 'vips', title: 'VIP时长(小时)', width: 230, edit: 'text'},
                {field: 'words', title: '备注', width: 300, edit: 'text'}
            ]],
            page: true,
            even: true
        });
       
        table.on('edit(cdktable)', function(obj){
            var data = obj.data; 
            var layEvent = obj.layEvent; 
            var tr = obj.tr; 
            $.ajax({
                url: 'cdk/update/index.php', 
                type: 'POST',
                data: {
                    id: data.cdk, 
                    field: obj.field, 
                    value: obj.value 
                },
                success: function(res){
                    var resf = JSON.parse(res);
                    if(resf.code === 0){
                        layer.msg('更新成功:', {icon: 1});
                    } else {
                        layer.msg('更新失败：' + resf.message, {icon: 2});
                    }
                }
            });
        });


        form.on('submit(removecdk)', function(data, formElem, event){
            var formData = data.field;
            $.ajax({
                url: 'cdk/delete/index.php', 
                type: 'POST',
                data: formData,
                success: function(res){
                    var resf = JSON.parse(res);
                    if(resf.code === 0){
                        layer.msg('CDK删除成功', {icon: 1});
                        setTimeout(function() {
                            location.reload();
                        }, 250);
                    } else {
                        layer.msg('CDK删除失败：' + resf.message, {icon: 2});
                        setTimeout(function() {
                            location.reload();
                        }, 250);
                    }
                }
            });
            return false; 
        });
    });
</script>
</body>
</html>